<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>

    <!-- 引入插件 -->
    <script src="../lib/leaflet/plugins/Leaflet.PopupLayoutLayer.js"></script>

    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
</body>

<script>
    // 初始化地图
    var map = L.map('map', {
        center: [39.924317, 116.390619],
        zoom: 8,
        preferCanvas: true // 使用canvas模式渲染矢量图形 
    });
    // 添加底图
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    const iconsmall = L.icon({
        iconUrl: '../img/circle-grey.png',
        iconSize: [10, 10]
    });

    const iconlarge = L.icon({
        iconUrl: '../img/circle-red.png',
        iconSize: [14, 14]
    });

    var popupLayoutLayer = new L.popupLayoutLayer({
        showAll: true // true，显示所有气泡；默认为 false，通过点击查看气泡
    }).addTo(map)
    // 添加点
    addPoint()
    function addPoint() {
        for (var i = 0; i < 10; i++) {
            var x = 115.390619 + (2 * Math.random());
            var y = 38.924317 + (2 * Math.random());
            var k = Math.ceil(5 * Math.random())
            for (var j = 0; j < k; j++) {
                addMarker(x, y, j, k)
            }
        }
    }
    function addMarker(x, y, j, k) {
        var marker = L.marker([y, x], {
            icon: iconsmall
        })
        var contentHTML = ` <div> <strong>共` + k + `个点</strong> <div>第` + (j + 1) + `个点</div> </div> `
        popupLayoutLayer.addMarker(marker, contentHTML)
    }
    // 显示所有气泡（showAll 为 true 时有效）
    popupLayoutLayer.showPopup()


    tooltipMouseEvent() // 鼠标移入事件
    // 鼠标移入事件
    function tooltipMouseEvent() {
        var tooltipMarkerList = popupLayoutLayer.getMarkers();
        for (var i = 0; i < tooltipMarkerList.length; i++) {
            var marker = tooltipMarkerList[i];
            var tooltip = marker.getTooltip();
            marker._icon.addEventListener('mouseover', onMarkerMouseover(marker, tooltip._container));
            marker._icon.addEventListener('mouseout', onMarkerMouseout(marker, tooltip._container));
            tooltip._container.addEventListener('mouseover', onMarkerMouseover(marker, tooltip._container));
            tooltip._container.addEventListener('mouseout', onMarkerMouseout(marker, tooltip._container));
        }
    }

    function onMarkerMouseover(marker, tooltipDom) {
        return function() {
            marker.setIcon(iconlarge);
            marker._icon.style.zIndex = 999;
            tooltipDom.style.zIndex = 999;
            tooltipDom.style.border = '2px solid #039BE5';
            popupLayoutLayer.getLine(marker) && popupLayoutLayer.getLine(marker).setStyle({
                color: '#039BE5'
            });
        };
    }

    function onMarkerMouseout(marker, tooltipDom) {
        return function() {
            marker.setIcon(iconsmall);
            marker._icon.style.zIndex = '';
            tooltipDom.style.zIndex = '';
            tooltipDom.style.border = '';
            tooltipDom.style.borderColor = '';
            popupLayoutLayer.getLine(marker) && popupLayoutLayer.getLine(marker).setStyle({
                color: '#90A4AE'
            });
        };
    }
</script>

</html>